<template>
    <simplebar data-simplebar-auto-hide="false">
          <!-- 移动到选择框 -->
    <el-dialog
      v-if="isShowFolder"
      title="请选择收藏夹"
      :visible.sync="isShowFolder"
      width="500px"
      @close="openFolderDialog(false)"
      :modal="false"
      :show-close="false"
      append-to-body
      center
    >
      <div class="folder-wrapper">
        <el-radio-group v-model="defaultFolder" size="medium">
          <el-radio
            v-for="(item, index) in otherFolders"
            :label="index + 1 + ''"
            :border="true"
            :key="index"
            >{{ item.name }}</el-radio
          >
        </el-radio-group>
      </div>
      <div class="folder-btn-wrapper">
        <el-button @click="openFolderDialog(false)">取消</el-button>
        <el-button type="primary" @click="moveCollections()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 收藏内容部分 -->
    <li
      v-for="(item, index) in list"
      :key="index"
      class="collection-body"
      @click="goMovieDetail(item.id)"
    >
      <div class="left-wrapper">
        <div class="left-collect">
          <img :src="baseUrl + 'posters/' + item.posterImg" :alt="item.title" />
        </div>
      </div>
      <div class="middle-collect">
        <p :title="item.title">{{ item.title }}</p>
        <span>收藏于：{{ item.date }}</span>
      </div>
      <div class="right-collect" @click.stop="stopParentEvent">
        <el-menu default-active="0" @select="handleSelect" :collapse="true">
          <el-submenu :index="FN == undefined ? '搜索结果' : FN">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
            </template>
            <el-menu-item :index="'1-' + item.id"
              >移动<i class="icon iconfont icon-yidongdao1"></i
            ></el-menu-item>
            <el-menu-item :index="'2-' + item.id"
              >取消收藏<i class="icon iconfont icon-xinsui"></i
            ></el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </li>
    <el-empty v-show="list.length == 0" class="empty" description="暂无收藏">
    </el-empty>
  </simplebar>

</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import http from "@/common/api/request.js";
import simplebar from "simplebar-vue";
import "simplebar-vue/dist/simplebar.min.css";
export default {
  props: ["list", "FN", "result"],
  components:{
    simplebar
  },
  data() {
    return {
      otherFolders: [], //其他文件夹
      isShowFolder: false,
      defaultFolder: "1",
      currentFolderName: "默认收藏夹",
      mid: 0, //当前的mid
      operationType: null,
    };
  },
  created() {
    this.baseUrl = global.env.SERVER_BASE + "/public/images/";
  },
  computed: {
    ...mapState({
      userCollection: (state) => state.user.userCollectionFolder,
    }),
  },
  mounted() {},
  methods: {
    ...mapMutations(["alterUser"]),
    ...mapActions(["initCollectionFolder"]),
    //移动收藏夹内容框开关
    openFolderDialog(val, OT,folderName="默认收藏夹") {
      this.currentFolderName = folderName;
      this.operationType = OT;
      if (!val) {
        //关闭窗口后自动恢复到默认状态
        this.defaultFolder = "1";
      } else {
        //获取其他收藏夹
        this.otherFolders = this.userCollection.filter(
          (item) => item.name !== this.currentFolderName
        );
      }
      this.isShowFolder = val;
    },
    //对收藏品选择对应的操作
    handleSelect(key, keyPath) {
      let folderName = keyPath[0];
      this.currentFolderName = folderName;
      let arr = key.split("-");
      let mid = parseInt(arr[1]);
      this.mid = mid;
      let type = arr[0];
      if (type == 1) {
        //移动到
        this.openFolderDialog(true,false,folderName);
      } else {
        //提醒是否删除
        this.$confirm("此操作将永久删除此收藏, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.deleteCollection(folderName, mid);
          })
          .catch(() => {});
      }
    },
    //将收藏夹内容移动到其他收藏夹
    moveCollections() {
      //operationType为true是移动全部,false是移动单个
      let question = this.operationType
        ? "确定将此收藏夹中的收藏移动到目标收藏夹中?"
        : "确定将此收藏移动到目标收藏夹中?";
      //先询问是否将此收藏夹中的所有内容移动到其他文件夹
      this.$confirm(question, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          //当前选中的文件名
          let targetFolderName =
            this.otherFolders[parseInt(this.defaultFolder) - 1].name;
          let sourceFolderName = this.currentFolderName;
          if (this.operationType) {
            this.submitCollections(null, sourceFolderName, targetFolderName); //sourceFolderName,targetFolderName
          } else {
            this.submitCollections(
              this.mid,
              sourceFolderName,
              targetFolderName
            );
          }
        })
        .catch(() => {});
    },
    goMovieDetail(mid) {
      window.open(global.env.DOMAIN_NAME + "/movie/" + mid);
    },
    //向后端请求移动
    submitCollections(mid, SFN, TFN) {
      //mid为null为全部移动,否则单条移动,SFN:源文件夹名,TFN:目标文件夹名
      http
        .$axios({
          url: "/users/api/moveUserCollections",
          method: "POST", //get请求对应 params  post请求的对应 data
          headers: {
            token: true,
          },
          data: {
            source: SFN,
            target: TFN,
            mid,
          },
        })
        .then((res) => {
          if (res.success) {
            //修改state中的folder中状态,userCollection使其重新渲染
            // 直接查询新的数据库
            this.initCollectionFolder();
            this.openFolderDialog(false);
          } else {
            this.$message.error(res.data);
          }
        });
    },
    //阻止父元素时间冒泡
    stopParentEvent() {
      event.stopPropagation();
    },

    //删除收藏
    deleteCollection(name, mid) {
      //向后端发送请求
      http
        .$axios({
          url: "/mtv/api/updateMovieMark",
          method: "POST", //get请求对应 params  post请求的对应 data
          headers: {
            token: true,
          },
          data: {
            id: mid,
            state: 0,
            folderIndex: name,
          },
        })
        .then((res) => {
          if (res.success) {
            //修改state中的folder中状态,userCollection使其重新渲染
            this.alterUser([
              {
                name,
                id: mid,
                isNormal: true,
                status: 0,
              },
            ]);
          } else {
            this.$message.error(res.data);
          }
        });
    },
  },
};
</script>
<style scoped lang="scss">
.folder-wrapper {
  width: 100%;
  height: 230px;
  overflow-y: auto;
}
.folder-btn-wrapper {
  display: flex;
  justify-content: center;
}
::v-deep .el-radio-group {
  display: flex;
  flex-direction: column;
  label {
    margin-left: 0 !important;
    margin: 5px;
    padding: 0px;
    padding-left: 5px;
    display: flex;
    align-items: center;
    span {
      font-size: 18px;
    }
  }
}
.collection-body:hover {
  box-shadow: 0 2px 8px #00000087;
}
.collection-body {
  width: 420px;
  margin-left: 30px;
  margin-bottom: 10px;
  height: 206px;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  align-items: center;
  border: 1px solid #eaeaea;
  transition: ease-out 0.3s;

  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
  .left-wrapper {
    width: max-content;
    height: 100%;
    display: flex;
    align-items: center;
    background: url()
      no-repeat;
    .left-collect {
      width: 135px;
      min-height: 190px;
      max-height: 200px;
      display: flex;
      align-items: center;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .middle-collect {
    flex-basis: 260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left:5px;
    p {
      margin: 0;
      padding: 0 !important;
      width: 230px;
      text-align: left !important;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 17px;
    }
    span {
      font-size: 15px;
    }
  }
  .right-collect {
    flex-basis: 40px;
    ::v-deep .el-menu--collapse {
      width: 40px;
      border: none;
      .el-submenu {
        .el-submenu__title {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 !important;
        }
      }
    }
    i {
      font-size: 22px;
    }
  }
}
.el-menu--vertical {
  .el-menu--popup {
    .el-menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
    }
  }
}
.el-empty {
  height: 100%;
  width: 300%;
}
::v-deep .simplebar-content{
  display:grid;
  grid-template-columns: repeat(2,1fr);
}
::v-deep .simplebar-content:before {
    content:none !important;
    display: table;
}
</style>
